<template>
  <el-form ref="form" :model="sizeForm" label-width="120px" >
    <el-row>
      <el-form-item label="检查类别">
        <el-select placeholder="请选择检查类别" v-model="sizeForm.category" clearable clear-icon="el-icon-close">
          <el-option
              v-for="item in categoryOptions"
              :label="item"
              :value="item"
          >
            {{item}}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="检查级别">
        <el-select placeholder="请选择检查级别" v-model="sizeForm.level" clearable clear-icon="el-icon-close">
          <el-option
              v-for="item in levelOptions"
              :label="item"
              :value="item"

          >
            {{item}}
          </el-option>
        </el-select>
      </el-form-item>
    </el-row>
    <el-form-item label="检查名称">
      <el-input placeholder="请输入检查名称" v-model="sizeForm.checkId"></el-input>
    </el-form-item>
    <el-row>
      <el-form-item label="问题产生单位">
        <el-select placeholder="请选择问题产生单位" v-model="sizeForm.quesProduceDep" clearable clear-icon="el-icon-close">
          <el-option
              v-for="item in reformDepOptions"
              :label="item"
              :value="item"

          >
            {{item}}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="判定依据">
        <el-select placeholder="请选择判定依据" v-model="sizeForm.according" clearable clear-icon="el-icon-close">
          <el-option
              v-for="item in accordingOptions"
              :label="item"
              :value="item"

          >
            {{item}}
          </el-option>
        </el-select>
      </el-form-item>
    </el-row>
    <el-row>
      <el-form-item label="问题严重程度">
        <el-select placeholder="请选择问题严重程度" v-model="sizeForm.seriousLevel" clearable clear-icon="el-icon-close">
          <el-option
              v-for="item in seriousLevelOptions"
              :label="item"
              :value="item"
          >
            {{item}}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="问题产生原因">
        <el-select placeholder="请选择问题产生原因" v-model="sizeForm.cause" clearable clear-icon="el-icon-close">
          <el-option
              v-for="item in causeOptions"
              :label="item"
              :value="item"
          >
            {{item}}
          </el-option>
        </el-select>
      </el-form-item>
    </el-row>
    <el-form-item  label="问题产生时间">
      <el-input placeholder="请输入问题产生时间" v-model="sizeForm.createTime"></el-input>
    </el-form-item>
    <el-form-item label="问题关键词">
      <el-input placeholder="请输入问题关键词" v-model="sizeForm.keyWord"></el-input>
    </el-form-item>
    <el-row>
      <el-form-item label="整改责任部门">
        <el-select placeholder="请选择整改责任部门"  v-model="sizeForm.reformDep" clearable clear-icon="el-icon-close">
          <el-option
              v-for="item in reformDepOptions"
              :label="item"
              :value="item"
          >
            {{item}}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="整改负责人">
        <el-input placeholder="请输入整改责任人" v-model="sizeForm.responsibilityPerson"></el-input>
      </el-form-item>
    </el-row>
    <el-row>
      <el-form-item label="检查时间">
        <el-date-picker
            v-model="sizeForm.startTime"
            type="date"
            placeholder="请选择检查开始时间">
        </el-date-picker>
        <span>--</span>
        <el-date-picker
            v-model="sizeForm.endTime"
            type="date"
            placeholder="请选择检查结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="整改完成时间">
        <el-date-picker
            v-model="sizeForm.rectificationFinishTime"
            type="date"
            placeholder="请选择整改完成时间">
        </el-date-picker>
      </el-form-item>
    </el-row>
    <el-form-item label="问题描述">
      <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入问题描述"
          v-model="sizeForm.questionDesc">
      </el-input>
    </el-form-item>

    <el-form-item label="整改措施">
      <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入整改措施"
          v-model="sizeForm.reformMethod">
      </el-input>
    </el-form-item>
    <el-form-item label="备注">
      <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入备注"
          v-model="sizeForm.description">
      </el-input>
    </el-form-item>
    <el-form-item label="问题是否重复">
      <el-radio-group v-model="sizeForm.isDuplicate">
        <el-radio :label="1">是</el-radio>
        <el-radio :label="0">否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="整改是否完成">
      <el-radio-group v-model="sizeForm.isComplete">
        <el-radio :label="1">是</el-radio>
        <el-radio :label="0">否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="是否超时">
      <el-radio-group v-model="sizeForm.overTime">
        <el-radio :label="1">是</el-radio>
        <el-radio :label="0">否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item size="large">
      <slot :sizeForm="sizeForm"></slot>
    </el-form-item>
  </el-form>

</template>
<script lang="ts">
import {defineComponent, onMounted, reactive, toRefs} from 'vue'
import {endLoading, startLoading} from "../../utils/loading";
import {getTemplateData} from "/@/api";
import {errorMessage} from "/@/utils/message";
export default defineComponent({
  name:'',
  setup(){
    const sizeForm=reactive({
      category:null,
      checkId: null,
      level:null,
      startTime:null,
      endTime:null,
      quesProduceDep:null,
      rectificationFinishTime:null,
      reformMethod:null,
      questionDesc:null,
      according:null,
      seriousLevel:null,
      cause:null,
      reformDep:null,
      keyWord:null,
      createTime:null,
      responsibilityPerson:null,
      isDuplicate:1,
      isComplete:1,
      overTime:1,
      description:null
    })
    const options=reactive<object>({
      categoryOptions:[],
      levelOptions:[],
      reformDepOptions:[],
      causeOptions:[],
      seriousLevelOptions:[],
      accordingOptions:[]
    })
    onMounted(()=>{
      startLoading()
      initPage()
    })
    const initPage=async ()=>{
      try{
        let res:any=await getTemplateData()
        res.forEach(item=>{
          switch (item.codeTableName) {
            case '部门':
              Object.assign(options,{
                reformDepOptions:item.menuNames
              })
              break
            case '检查类别':
              Object.assign(options,{
                categoryOptions:item.menuNames
              })
              break
            case '问题产生原因':
              Object.assign(options,{
                causeOptions:item.menuNames
              })
              break
            case '检查级别':
              Object.assign(options,{
                levelOptions:item.menuNames
              })
              break
            case '问题严重程度':
              Object.assign(options,{
                seriousLevelOptions:item.menuNames
              })
              break
            case '判定依据':
              Object.assign(options,{
                accordingOptions:item.menuNames
              })
          }
        })
        endLoading()
      }catch (e) {
        endLoading()
        errorMessage('网络错误！')
      }
    }
    return {
      sizeForm,
      ...toRefs(options)

    }
  }
})
</script>

<style lang='scss' scoped>

</style>
